<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刘澳琳的exam5</title>
		<style>
			body{
				background-color: black;
			}
			#player{
				position: absolute;
				left: 500px;
				top:200px;
			}
            .pet{
                position:absolute;
                left: 100px;
                top: 10px;
            }
		</style>
	<script src="./js/jquery-3.6.0.js"></script>
	<script>
		//199000932刘澳琳
        $(function(){//直接执行里面的内容
			$(document).click(function(e){
				$(document).keydown(function(e){
					if(e.keyCode==32){//检测如果按下空格键就是放大招
						$('#player').attr("src","img/playerbig_right.gif")
					}
				})
				$(document).dblclick(function(){//双击切换成孙悟空伪装形态，但是没法一直存在，走动就回原形
						$('#player').attr("src","img/player3.gif")
				})
                
				x1 = $('#player').position().left;//获取当前相对窗体左侧距离
				y1 = $('#player').position().top;
				x2 = e.clientX;//鼠标点击的位置x轴
				y2=e.clientY;//鼠标点击的位置y轴
				x2=x2-268/2; //减去图片宽高/2，让图片到达我们点击的中央
				y2=y2-217/2;

				if(x1<x2){   //这是对比图片和鼠标点击的位置来判断图片向左向右
					$('#player').attr("src","img/player_right.gif");
				}else{
					$('#player').attr("src","img/player_left.gif");
				}

                if((x1<420&&x1>0)&&(y1>0&&y1<210.5)){   //100+199+134，10+199+108.5理论数值，可以有偏差
                    $('#player').attr("src","img/playerbig_right.gif")
                    $('.pet').hide();                   
                }

				time1 = setInterval(moveX,"50");//不断调用函数实现我们的移动
				time2 = setInterval(moveY,"50");
				function moveX(){
					if(x1<x2){//如果现在的位置<我点击的位置
						if(Math.abs($('#player').position().left-x2)<=5){ //获取当前图片和我点击位置的距离，小于5px，就停止调用函数
							clearInterval(time1);
						}else{
							console.log(Math.abs(x1-x2));
							$("#player").stop().css({"left":"+=5px"})//反之，就每隔50毫秒就让图片离左边越来越远(向右靠近)
						}
					}else{
						if(Math.abs($('#player').position().left-x2)<=5){
							clearInterval(time1);
						}else{
							console.log(Math.abs(x1-x2));
							$("#player").stop().css({"left":"-=5px"})
						}
					}
				}
				function moveY(){//和moveX函数相同的逻辑
					if(y1<y2){
						if(Math.abs($('#player').position().top-y2)<=5){
							clearInterval(time2);
						}else{
							// console.log(Math.abs(y1-y2));
							$("#player").stop().css({"top":"+=5px"})
						}
					}else{
						if(Math.abs($('#player').position().top-y2)<=5){
							clearInterval(time2);
						}else{
							// console.log(Math.abs(y1-y2));
							$("#player").stop().css({"top":"-=5px"})
						}
					}
				}
			})
			
		})

	</script>
	</head>
	<body>
		<img id="player" src="img/player_left.gif" >
        <div class="pet">
            <img src="img/pet.gif">
        </div>
	</body>
</html>

